<template>
    <div class="payment-page">
        <div class="header">
            <h1>选择支付方式</h1>
        </div>

        <div class="order-summary">
            <div class="summary-row">
                <span>订单总额</span>
                <span class="total">¥{{ cartTotal }}</span>
            </div>
        </div>
        <div class="payment-options">
            <div :class="['option', { selected: paymentMethod === 'online' }]" @click="selectPaymentMethod('online')">
                <div class="option-header">
                    <div class="radio"></div>
                    <h3>在线支付</h3>
                </div>
                <p class="option-desc">VISA / MASTER</p>
            </div>

            <div v-if="showDf" :class="['option', { selected: paymentMethod === 'on_delivery' }]" @click="selectPaymentMethod('on_delivery')">
                <div class="option-header">
                    <div class="radio"></div>
                    <h3>到付</h3>
                </div>
                <p class="option-desc">配送员送货时收款</p>
            </div>
            <div v-if="showDnzf" :class="['option', { selected: paymentMethod === 'on_delivery' }]" @click="selectPaymentMethod('on_delivery')">
                <div class="option-header">
                    <div class="radio"></div>
                    <h3>店内支付</h3>
                </div>
                <p class="option-desc">餐厅前台付款</p>
            </div>
        </div>
    </div>

    <div class="actions">
        <button @click="goBack" class="back-btn">上一步</button>
        <button @click="confirmOrder" class="confirm-btn">确认下单</button>
    </div>
</template>

<script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useOrderStore } from '../store/orderStore'

export default {
    name: 'PaymentPage',
    setup() {
        const isDeskOrder = !!window.outerParams.deskCode
        const router = useRouter()
        const orderStore = useOrderStore()

        console.log(orderStore)


        const cartTotal = computed(() => orderStore.cartTotal)
        const paymentMethod = computed(() => orderStore.paymentMethod)
        const deliveryMethod = computed(() => orderStore.deliveryMethod)

        const showDnzf = computed(() => {
            if (isDeskOrder) return true
            if (deliveryMethod.value == 'collection') return true
            return false
        })
        const showDf = computed(()=>{
            if(!isDeskOrder && deliveryMethod.value != 'collection') return true
            return false
        })

        const selectPaymentMethod = (method) => {
            orderStore.setPaymentMethod(method)
        }

        const goBack = () => {
            router.push('/delivery')
        }

        const confirmOrder = () => {
            // 模拟下单成功
            alert('下单成功！')
            orderStore.clearCart()
            router.push('/orders')
        }

        return {
            cartTotal,
            paymentMethod,
            selectPaymentMethod,
            goBack,
            confirmOrder,
            isDeskOrder,
            deliveryMethod,
            showDnzf,
            showDf
        }
    }
}
</script>

<style scoped>
.payment-page {
    padding: 20px;
    padding-bottom: 80px;
}

.header h1 {
    color: #333;
    margin-bottom: 20px;
}

.order-summary {
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 8px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
}

.total {
    color: #42b983;
}

.payment-options {
    margin: 20px 0;
}

.option {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    cursor: pointer;
}

.option.selected {
    border-color: #42b983;
    background-color: #f8fff8;
}

.option-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.radio {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 15px;
}

.option.selected .radio {
    border-color: #42b983;
    background-color: #42b983;
    position: relative;
}

.option.selected .radio::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
}

.option h3 {
    margin: 0;
}

.option-desc {
    color: #666;
    margin: 0;
    margin-left: 35px;
}

.actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto;
}

.back-btn,
.confirm-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.back-btn {
    background-color: #f0f0f0;
    color: #333;
}

.confirm-btn {
    background-color: #42b983;
    color: white;
}
</style>